<template>
  <div class="user-card" :class="{ active: isActive }">
    <div class="user-avatar">
      <img :src="user.avatar" :alt="user.name" />
      <div v-if="user.online" class="online-indicator"></div>
    </div>

    <div class="user-info">
      <h3>{{ user.name }}</h3>
      <p class="user-email">{{ user.email }}</p>
      <p class="user-role">{{ user.role }}</p>
    </div>

    <div class="user-actions">
      <button @click="handleEdit" class="edit-btn">编辑</button>
      <button @click="handleDelete" class="delete-btn">删除</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// interface Emits {
//   (
//     e: 'edit',
//     user: {
//       id: number
//       name: string
//       email: string
//       role: string
//       avatar: string
//       online: boolean
//     },
//   ): void
//   (e: 'delete', userId: number): void
// }

// 3.3+：另一种更简洁的语法, 具名元组语法
interface Emits {
  edit: [
    user: {
      id: number
      name: string
      email: string
      role: string
      avatar: string
      online: boolean
    },
  ]
  delete: [userId: number]
}
// const props = defineProps({
//   user: {
//     type: Object,
//     required: true,
//   },
//   isActive: {
//     type: Boolean,
//     default: false,
//   },
// })
const props = withDefaults(
  defineProps<{
    user: {
      id: number
      name: string
      email: string
      role: string
      avatar: string
      online: boolean
    }
    isActive?: boolean
  }>(),
  {
    isActive: false,
  },
)

// const emit = defineEmits(['edit', 'delete'])
const emit = defineEmits<Emits>() // ts高级用法，定义事件类型

const handleEdit = () => {
  emit('edit', props.user)
}

const handleDelete = () => {
  if (confirm(`确定要删除用户 ${props.user.name} 吗？`)) {
    emit('delete', props.user.id)
  }
}
</script>

<style scoped>
.user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.user-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-card.active {
  border-color: #007bff;
  background: #f8f9fa;
}

.user-avatar {
  position: relative;
  margin-right: 15px;
}

.user-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #28a745;
  border-radius: 50%;
  border: 2px solid white;
}

.user-info {
  flex: 1;
}

.user-info h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.user-email {
  margin: 0 0 3px 0;
  color: #666;
  font-size: 14px;
}

.user-role {
  margin: 0;
  color: #007bff;
  font-size: 12px;
  font-weight: bold;
}

.user-actions {
  display: flex;
  gap: 8px;
}

.edit-btn,
.delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.edit-btn {
  background: #007bff;
  color: white;
}

.delete-btn {
  background: #dc3545;
  color: white;
}

.edit-btn:hover {
  background: #0056b3;
}

.delete-btn:hover {
  background: #c82333;
}
</style>
